<template>
  <div>
    <el-table v-loading="pageInfo.loading" :data="dataList" ref="table">
      <el-table-column type="index" width="55" align="center" />
      <el-table-column :label="f" align="center" :prop="f" v-for="(f,i) in props.fieldList" :key="i"/>
    </el-table>
    
    <pagination
      v-show="pageInfo.total>0"
      :total="pageInfo.total"
      v-model:page="pageInfo.pageNum"
      v-model:limit="pageInfo.pageSize"
      @pagination="pageTo"
    />
  </div>
</template>

<script setup name="ListTable">
import { listModelData } from "@/api/dev/modelData";

const props = defineProps({
  fieldList: {
    type: Array
  },
  dataList: {
    type: Array
  },
  pageInfo: {
    type: Object
  }
});

const { proxy } = getCurrentInstance();
const emit = defineEmits(['page'])

const dataList = ref([]);
const total = ref(0);
const pageInfo = ref({total:0,pageSize:10, pageNum:1, loading:false});


const data = reactive({
  form: {},
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    field: null,
    exp: null,
    val: null,
  }
});

const { queryParams, form } = toRefs(data);

watch(() => props.dataList, val => {  
  dataList.value = val;
    loading.value = false;
},{ deep: true, immediate: true });

watch(() => props.pageInfo, val => {  
  pageInfo.value = val;
},{ deep: true, immediate: true });

/** 查询模型字段列表 */
function pageTo() {
  loading.value = true;
   emit('page', pageInfo);
}

</script>
